<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file">
  <img src="" alt="">
  <!-- 不经过服务器渲染图像的本地预览 base64图片 -->
  <script>
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    // 1. 选择完文件后会触发file文件域的change事件
    ipt.addEventListener('change',function(e){
        console.log(e.target.files[0]);
        // 2. 使用H5新增的方法 fileReader() 文件读取
        const fileRead = new FileReader()
        // 3. fileRead的readAsDataUrl 读取文件
        fileRead.readAsDataURL(e.target.files[0])
        // 4. fileread中load方法,表示读取成功
        fileRead.onload = function(){
          console.log(fileRead.result); // base64格式的图片str
          img.src = fileRead.result
        }
    })
  </script>
</body>
</html>